<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市县联动</title>
<script src="省市.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{vertical-align: middle;}
span{width:200px; height:22px;background-color: #eee;display: inline-block;}
</style>

<script type="text/javascript">
	// jQuery 页面加载函数
	$(function(){
		
		var $province = $("#province");
		var $city = $("#city");
		var $county = $("#county");
		
		// 将省的选项加入下拉框province中
		$.each( provinces , function(i,o){
			// 使用HTML代码构建 jQuery 对象
			var html = '<option value="'+i+'">'+o+'</option>';
			// 通过HTML代码构建 jQuery 对象， jQuery对象命名习惯：使用$开头
			var $opt = $(html);
			// 添加一个选项
			$province.append( $opt );
		})
		
		// 给省下拉框添加选择事件监听
		$province.change(function(){
			// 获取到 选中值
			let index = $province.val(); // 获取选中值
			let cityItems = citys[index];
			$city.empty();
			$.each( cityItems , function(i,o){
				var html = '<option value="'+i+'">'+o+'</option>';
				var $opt = $(html);
				$city.append( $opt );
			});
		});
		
		// 扩展： 实现 市县 的联动
		$city.change(function(){
			// 获取到 选中值
			let index1 = $province.val(); // 获取省选中值
			let index2 = $city.val(); // 获取市选中值
			// 获取三维数组最后个数组
			let countyItems = countys[index1][index2];
			$county.empty();
			console.info(index1);
			console.info(index2);
			console.info(countyItems);
			$.each( countyItems , function(i,o){
				var html = '<option value="'+i+'">'+o+'</option>';
				var $opt = $(html);
				$county.append( $opt );
			});
		});
		
	});
	

</script>

</head>
<body>
省：<select id="province" onchange=""></select>
市：<select id="city"></select>
县：<select id="county"></select><br>

街道：<input><br>
<h3>请将完整的地址显示在下面</h3>
您的地址：<span></span>


</body>
</html>